<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .center {
        text-align: center;
        margin: 15% auto;
    }
    
    .color {
        background-color: skyblue;
    }
    
    #all {
        margin: 0;
        padding: 0;
    }
    
    .font {
        color: white;
        font-size: 20px;
    }
</style>

<body>
    <table border="1px" width=200px height=200px class="center">
        <tr class="color">
            <td><input type="checkbox" id="all"></td>
            <td class="font">商品</td>
            <td class="font">价钱</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="other"></td>
            <td>iPone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="other"></td>
            <td>iPad Pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="other"></td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="other"></td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>
    </table>
    <script>
        var first = document.getElementById('all');
        var others=document.querySelectorAll('#other'); /*设置一个值用来标记单次点击还是双次点击,初始化为0*/
        first.onclick = function() {
            if(first.checked==true){
                for(var i=0;i<others.length;i++){
                    others[i].checked=true;
                }
            }
            else{
                for(var i=0;i<others.length;i++){
                    others[i].checked=false;
                    idex=idex*0;
                }
            }
        }
        //后面
       var idex=0;
       for(var i=0;i<others.length;i++){
       others[i].onclick=function(){
           for(var i=0;i<others.length;i++){
               //console.log("外层"+idex);
               if(others[i].checked==true){
                   console.log("内层"+idex);
                   idex++;
               }
               else if(others[i].checked==false){
                //    console.log('之前'+idex);
                   idex=idex*0;
                //    console.log('之后'+idex);
               }
            //    console.log('结束循环一次内层循环'+idex);
           }
           if(idex==4){
               first.checked=true;
           }
           else{
               first.checked=false;
           } 
           idex=0;
       }
       
}
        
    </script>

</body>

</html>